<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-07-24
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-07-24
 * @FilePath: /element-admin/src/views/MemberInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="MemberRewardStrategyInfo-page" class="both-center">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <el-button plain size="small" @click="handleClose()">关闭</el-button>
        <el-button plain size="small" type="primary" @click="handleInit">初始化数据</el-button>
        <el-button plain ize="small" type="info" @click="handleRefesh">刷新</el-button>
        <el-button plain size="small" type="success" @click="handleSave">保存</el-button>
        <el-button plain size="small" type="danger" @click="handleDel">删除</el-button>
      </el-row>
      <el-divider content-position="left">积分策略信息</el-divider>
      <el-row class="row fstRow clearfix">
        <!-- 上侧项目内容栏-->
        <el-col :span="24" style="height: auto;">
          <!--分类栏内容介绍行-->
          <div class="col-sm-12" style="width: 1080px">
            <el-form :label-width="labelWidth" :model="Strategy" label-position="right">
              <el-card class="card-top-container">
                <el-form-item label="策略名称">
                  <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                    <el-input v-model="Strategy.name" maxlength="100"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="策略点数">
                  <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                    <el-input v-model="Strategy.points" maxlength="100"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="奖励方式">
                  <el-select v-model="Strategy.reward_way" placeholder="策略触发功能" size="small">
                    <el-option label="请选择策略触发功能" value=-1></el-option>
                      <el-option v-for="item in reward_way_options" v-bind:key="item.value" :data="item"
                                 :label="item.label"
                                 :value=item.value></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="策略触发功能">
                  <el-select v-model="Strategy.action" placeholder="策略触发功能" size="small">
                    <el-option label="请选择策略触发功能" value=-1></el-option>
                    <el-option v-for="item in action_options" v-bind:key="item.value" :data="item"
                               :label="item.label"
                               :value=item.value></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="触发url">
                  <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
                    <el-input v-model="Strategy.diff_url" maxlength="100"></el-input>
                  </el-col>
                </el-form-item>
              </el-card>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {add, drop, fetchOne, update} from "@/api/MemberRewardStrategy";
import {Loading, Message} from 'element-ui';

export default {
  name: "MemberRewardStrategyInfo",
  components: {},
  data() {
    return {
      initFlg: true,
      loadingInstance: null,
      labelWidth: "140px",
      strategy_id: '',
      action_options: [
        {label: "登录", value: "STR-001", key: 1},
        {label: "注册", value: "STR-002", key: 2},
        {label: "日打卡", value: "STR-003", key: 3},
      ],
      reward_way_options: [
        {label: "积分", value: "STR-001", key: 1},
        {label: "红包", value: "STR-002", key: 2},
      ],
      status_options: [
        {label: "正常", value: "STR-001", key: 1},
        {label: "停用", value: "STR-002", key: 2},
        {label: "激活", value: "STR-003", key: 3},
        {label: "删除", value: "STR-009", key: 4},
      ],
      Strategy: {
        id: 0
        , name: ""
        , points: ""
        , reward_way: ""
        , status: "STR-001"
        , action: ""
        , diff_url: ""
      },
    }
  },
  props: {
    drawId: {type: [Object, Number], default: 0}
  },
  computed: {},
  methods: {
    handleInit() {
      this.initFlg = true;
      this.Strategy = this.initStrategy()
    },
    initStrategy() {
      return new Object({
        id: 0
        , name: ""
        , status: "STR-001"
        , action: ""
        , diff_url: ""
      });
    },
    handleLoad() {
      let param = {"id": this.strategy_id,}
      fetchOne(param).then(res => {
        if (res.code == 200) {
          this.Strategy = res.data;
        }
      }).catch(err => {
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    handleRefesh() {
      this.handleLoad();
    },
    handleSave() {
      if (this.initFlg) {
        add({data: this.Strategy}).then((result) => {
          if (result.code == 200) {
            Message({message: "执行成功", type: 'success', duration: 3 * 1000});
            this.$emit('fMethod', true);
          }else{
            Message({message: result.message, type: 'error', duration: 3 * 1000});
          }
        }).catch(err => {
          this.$message.error('执行失败，平台返回错误消息:' + err);
        });
      } else {
        update({data: this.Strategy}).then((result) => {
          if (result.code == 200) {
            Message({message: "执行成功", type: 'success', duration: 3 * 1000});
            this.$emit('fMethod', true);
          }else{
            Message({message: result.message, type: 'error', duration: 3 * 1000});
          }
        }).catch(err => {
          this.$message.error('执行失败，平台返回错误消息:' + err);
        });
      }
    },
    handleDel() {
      let param = {"id": this.Strategy.id,}
      drop(param).then(res => {
        if (res.code == 200) {
          this.handleFetch();
          Message({message: "执行成功", type: 'success', duration: 3 * 1000});
        }
      }).catch(err => {
        Message({message: err, type: 'error', duration: 3 * 1000})
      });
    },
    handleClose() {
      this.$emit('fMethod');
    },
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        this.handleInit();
        if (drawId > 0) {
          this.initFlg = false;
          this.strategy_id = drawId;
          this.handleLoad();
        } else {
          this.initFlg = true;
        }
      }
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}

.card-top-container {
  display: block;
  padding: 5px;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
</style>